वेबकोडेक्स व्हिडिओफ्रेम प्लेन ऍक्सेस: रॉ व्हिडिओ डेटा मॅनिप्युलेशनचा सखोल अभ्यास

बऱ्याच वर्षांपासून, वेब ब्राउझरमध्ये हाय-परफॉर्मन्स व्हिडिओ प्रोसेसिंग हे एक दूरचे स्वप्न वाटत होते. डेव्हलपर्स अनेकदा <video> एलिमेंट आणि 2D कॅनव्हास API च्या मर्यादांमध्ये अडकलेले होते, जे शक्तिशाली असले तरी, परफॉर्मन्समध्ये अडथळे निर्माण करत होते आणि मूळ रॉ व्हिडिओ डेटामध्ये मर्यादित प्रवेश देत होते. वेबकोडेक्स API च्या आगमनाने हे चित्र पूर्णपणे बदलले आहे, जे ब्राउझरच्या अंगभूत मीडिया कोडेक्समध्ये लो-लेव्हल ऍक्सेस प्रदान करते. याचे सर्वात क्रांतिकारक वैशिष्ट्य म्हणजे VideoFrame ऑब्जेक्टद्वारे वैयक्तिक व्हिडिओ फ्रेमच्या रॉ डेटामध्ये थेट प्रवेश करण्याची आणि फेरफार करण्याची क्षमता.

हा लेख साध्या व्हिडिओ प्लेबॅकच्या पलीकडे जाऊ इच्छिणाऱ्या डेव्हलपर्ससाठी एक सर्वसमावेशक मार्गदर्शक आहे. आम्ही VideoFrame प्लेन ऍक्सेसच्या गुंतागुंतीचा शोध घेऊ, कलर स्पेसेस आणि मेमरी लेआउट सारख्या संकल्पना सुलभ करू आणि आपल्याला रिअल-टाइम फिल्टर्सपासून ते अत्याधुनिक कॉम्प्युटर व्हिजन कार्यांपर्यंत, इन-ब्राउझर व्हिडिओ ऍप्लिकेशन्सची पुढील पिढी तयार करण्यासाठी सक्षम करण्यासाठी व्यावहारिक उदाहरणे देऊ.

पूर्व-आवश्यकता

या मार्गदर्शकाचा पुरेपूर फायदा घेण्यासाठी, तुम्हाला खालील गोष्टींचे चांगले ज्ञान असले पाहिजे:

• आधुनिक जावास्क्रिप्ट: असिंक्रोनस प्रोग्रामिंगसह (async/await, प्रॉमिसेस).
• व्हिडिओच्या मूलभूत संकल्पना: फ्रेम्स, रिझोल्यूशन आणि कोडेक्स सारख्या संज्ञांशी ओळख असणे उपयुक्त आहे.
• ब्राउझर APIs: कॅनव्हास 2D किंवा WebGL सारख्या APIs चा अनुभव फायदेशीर ठरेल पण तो पूर्णपणे आवश्यक नाही.

व्हिडिओ फ्रेम्स, कलर स्पेसेस आणि प्लेन्स समजून घेणे

API मध्ये खोलवर जाण्यापूर्वी, आपण प्रथम व्हिडिओ फ्रेमचा डेटा प्रत्यक्षात कसा दिसतो याचे एक ठोस मानसिक मॉडेल तयार केले पाहिजे. डिजिटल व्हिडिओ म्हणजे स्थिर प्रतिमा किंवा फ्रेम्सचा एक क्रम. प्रत्येक फ्रेम पिक्सेलचा एक ग्रिड असतो आणि प्रत्येक पिक्सेलला एक रंग असतो. तो रंग कसा संग्रहित केला जातो हे कलर स्पेस आणि पिक्सेल फॉरमॅट द्वारे परिभाषित केले जाते.

RGBA: वेबची मूळ भाषा

बहुतेक वेब डेव्हलपर्सना RGBA कलर मॉडेलची माहिती असते. प्रत्येक पिक्सेल चार घटकांनी दर्शविला जातो: लाल, हिरवा, निळा आणि अल्फा (पारदर्शकता). डेटा सामान्यतः मेमरीमध्ये इंटरलीव्हड (interleaved) पद्धतीने संग्रहित केला जातो, म्हणजेच एका पिक्सेलसाठी R, G, B, आणि A व्हॅल्यूज एकापाठोपाठ एक संग्रहित केल्या जातात:

[R1, G1, B1, A1, R2, G2, B2, A2, ...]

या मॉडेलमध्ये, संपूर्ण इमेज मेमरीच्या एकाच, अखंड ब्लॉकमध्ये संग्रहित केली जाते. आपण याला डेटाचा एकच "प्लेन" आहे असे समजू शकतो.

YUV: व्हिडिओ कॉम्प्रेशनची भाषा

तथापि, व्हिडिओ कोडेक्स क्वचितच थेट RGBA सोबत काम करतात. ते YUV (किंवा अधिक अचूकपणे, Y'CbCr) कलर स्पेसेसला प्राधान्य देतात. हे मॉडेल इमेजची माहिती यात विभाजित करते:

• Y (L्युमा): ब्राइटनेस किंवा ग्रेस्केल माहिती. मानवी डोळा ल्युमामधील बदलांसाठी सर्वात संवेदनशील असतो.
• U (Cb) आणि V (Cr): क्रोमिनन्स किंवा कलर-डिफरन्स माहिती. मानवी डोळा ब्राइटनेसच्या तपशीलापेक्षा रंगाच्या तपशीलासाठी कमी संवेदनशील असतो.

हे विभाजन कार्यक्षम कॉम्प्रेशनसाठी महत्त्वाचे आहे. U आणि V घटकांचे रिझोल्यूशन कमी करून—या तंत्राला क्रोमा सबसॅम्पलिंग म्हणतात—आपण गुणवत्तेत कमीत कमी जाणवण्याजोग्या नुकसानीसह फाइलचा आकार लक्षणीयरीत्या कमी करू शकतो. यामुळे प्लेनर पिक्सेल फॉरमॅट्स तयार होतात, जिथे Y, U, आणि V घटक वेगळ्या मेमरी ब्लॉक्समध्ये किंवा "प्लेन्स"मध्ये संग्रहित केले जातात.

एक सामान्य फॉरमॅट I420 आहे (एक प्रकारचा YUV 4:2:0), जिथे प्रत्येक 2x2 पिक्सेल ब्लॉकसाठी, चार Y सॅम्पल्स असतात पण फक्त एक U आणि एक V सॅम्पल असतो. याचा अर्थ U आणि V प्लेन्सची रुंदी आणि उंची Y प्लेनच्या निम्मी असते.

हा फरक समजून घेणे अत्यंत महत्त्वाचे आहे कारण वेबकोडेक्स तुम्हाला थेट याच प्लेन्समध्ये प्रवेश देतो, जसे डिकोडर त्यांना पुरवतो.

VideoFrame ऑब्जेक्ट: पिक्सेल डेटासाठी तुमचा प्रवेशद्वार

या कोड्याचे केंद्रस्थान VideoFrame ऑब्जेक्ट आहे. ते व्हिडिओच्या एका फ्रेमचे प्रतिनिधित्व करते आणि त्यात केवळ पिक्सेल डेटाच नाही तर महत्त्वाचा मेटाडेटा देखील असतो.

VideoFrame चे मुख्य गुणधर्म

• format: पिक्सेल फॉरमॅट दर्शवणारी स्ट्रिंग (उदा., 'I420', 'NV12', 'RGBA').
• codedWidth / codedHeight: फ्रेमचे संपूर्ण डायमेन्शन्स जसे मेमरीमध्ये संग्रहित आहेत, कोडेकला आवश्यक असलेल्या कोणत्याही पॅडिंगसह.
• displayWidth / displayHeight: फ्रेम प्रदर्शित करण्यासाठी वापरले जाणारे डायमेन्शन्स.
• timestamp: फ्रेमचा प्रेझेंटेशन टाइमस्टॅम्प मायक्रोसेकंदमध्ये.
• duration: फ्रेमचा कालावधी मायक्रोसेकंदमध्ये.

जादुई मेथड: copyTo()

रॉ पिक्सेल डेटामध्ये प्रवेश करण्याची प्राथमिक मेथड videoFrame.copyTo(destination, options) आहे. ही असिंक्रोनस मेथड फ्रेमचा प्लेन डेटा तुम्ही पुरवलेल्या बफरमध्ये कॉपी करते.

• destination: डेटा ठेवण्यासाठी पुरेसा मोठा ArrayBuffer किंवा टाइप्ड ॲरे (जसे की Uint8Array).
• options: एक ऑब्जेक्ट जो कोणते प्लेन्स कॉपी करायचे आणि त्यांचे मेमरी लेआउट निर्दिष्ट करतो. वगळल्यास, ते सर्व प्लेन्स एकाच अखंड बफरमध्ये कॉपी करते.

ही मेथड एक प्रॉमिस रिटर्न करते जे PlaneLayout ऑब्जेक्ट्सच्या ॲरेसह रिझॉल्व्ह होते, फ्रेममधील प्रत्येक प्लेनसाठी एक. प्रत्येक PlaneLayout ऑब्जेक्टमध्ये माहितीचे दोन महत्त्वपूर्ण तुकडे असतात:

• offset: बाइट ऑफसेट जिथे या प्लेनचा डेटा डेस्टिनेशन बफरमध्ये सुरू होतो.
• stride: पिक्सेलच्या एका ओळीच्या सुरुवातीपासून त्या प्लेनसाठी पुढील ओळीच्या सुरुवातीपर्यंतच्या बाइट्सची संख्या.

एक महत्त्वपूर्ण संकल्पना: स्ट्राइड विरुद्ध विड्थ

लो-लेव्हल ग्राफिक्स प्रोग्रामिंगमध्ये नवीन असलेल्या डेव्हलपर्ससाठी हा गोंधळाच्या सर्वात सामान्य स्रोतांपैकी एक आहे. तुम्ही असे गृहीत धरू शकत नाही की पिक्सेल डेटाची प्रत्येक ओळ एकामागोमाग एक घट्टपणे पॅक केलेली आहे.

• विड्थ (Width) म्हणजे इमेजच्या एका ओळीतील पिक्सेलची संख्या.
• स्ट्राइड (Stride) (याला पिच किंवा लाइन स्टेप असेही म्हणतात) म्हणजे मेमरीमधील एका ओळीच्या सुरुवातीपासून पुढच्या ओळीच्या सुरुवातीपर्यंतच्या बाइट्सची संख्या.

बऱ्याचदा, stride हे width * bytes_per_pixel पेक्षा जास्त असेल. याचे कारण असे की CPU किंवा GPU द्वारे जलद प्रोसेसिंगसाठी मेमरी अनेकदा हार्डवेअरच्या सीमांनुसार (उदा. 32- किंवा 64-बाइट सीमा) पॅड केली जाते. एका विशिष्ट ओळीतील पिक्सेलचा मेमरी ॲड्रेस मोजण्यासाठी तुम्ही नेहमी स्ट्राइड वापरला पाहिजे.

स्ट्राइडकडे दुर्लक्ष केल्याने प्रतिमा तिरकस किंवा विकृत दिसतील आणि डेटा ऍक्सेस चुकीचा होईल.

व्यावहारिक उदाहरण १: ग्रेस्केल प्लेन ऍक्सेस करणे आणि प्रदर्शित करणे

चला एका सोप्या पण शक्तिशाली उदाहरणाने सुरुवात करूया. वेबवरील बहुतेक व्हिडिओ I420 सारख्या YUV फॉरमॅटमध्ये एन्कोड केलेले असतात. 'Y' प्लेन हे प्रभावीपणे इमेजचे संपूर्ण ग्रेस्केल représentation आहे. आपण फक्त हा प्लेन काढून घेऊ शकतो आणि कॅनव्हासवर रेंडर करू शकतो.

async function displayGrayscale(videoFrame) {
  // We assume the videoFrame is in a YUV format like 'I420' or 'NV12'.
  if (!videoFrame.format.startsWith('I4')) {
    console.error('This example requires a YUV 4:2:0 planar format.');
    videoFrame.close();
    return;
  }

  const yPlaneInfo = videoFrame.layout[0]; // The Y plane is always first.

  // Create a buffer to hold just the Y plane data.
  const yPlaneData = new Uint8Array(yPlaneInfo.stride * videoFrame.codedHeight);

  // Copy the Y plane into our buffer.
  await videoFrame.copyTo(yPlaneData, {
    rect: { x: 0, y: 0, width: videoFrame.codedWidth, height: videoFrame.codedHeight },
    layout: [yPlaneInfo]
  });

  // Now, yPlaneData contains the raw grayscale pixels.
  // We need to render it. We'll create an RGBA buffer for the canvas.
  const canvas = document.getElementById('my-canvas');
  canvas.width = videoFrame.displayWidth;
  canvas.height = videoFrame.displayHeight;
  const ctx = canvas.getContext('2d');
  const imageData = ctx.createImageData(canvas.width, canvas.height);

  // Iterate over the canvas pixels and fill them from the Y plane data.
  for (let y = 0; y < videoFrame.displayHeight; y++) {
    for (let x = 0; x < videoFrame.displayWidth; x++) {
      // Important: Use stride to find the correct source index!
      const yIndex = y * yPlaneInfo.stride + x;
      const luma = yPlaneData[yIndex];

      // Calculate the destination index in the RGBA ImageData buffer.
      const rgbaIndex = (y * canvas.width + x) * 4;

      imageData.data[rgbaIndex] = luma;     // Red
      imageData.data[rgbaIndex + 1] = luma; // Green
      imageData.data[rgbaIndex + 2] = luma; // Blue
      imageData.data[rgbaIndex + 3] = 255;  // Alpha
    }
  }

  ctx.putImageData(imageData, 0, 0);

  // CRITICAL: Always close the VideoFrame to release its memory.
  videoFrame.close();
}

हे उदाहरण अनेक महत्त्वाचे टप्पे अधोरेखित करते: योग्य प्लेन लेआउट ओळखणे, डेस्टिनेशन बफर वाटप करणे, डेटा काढण्यासाठी copyTo वापरणे, आणि नवीन इमेज तयार करण्यासाठी stride वापरून डेटावर योग्यरित्या इटरेट करणे.

व्यावहारिक उदाहरण २: इन-प्लेस मॅनिप्युलेशन (सेपिया फिल्टर)

आता आपण थेट डेटा मॅनिप्युलेशन करूया. सेपिया फिल्टर हा एक क्लासिक इफेक्ट आहे जो लागू करणे सोपे आहे. या उदाहरणासाठी, RGBA फ्रेमसोबत काम करणे सोपे आहे, जे तुम्हाला कॅनव्हास किंवा WebGL संदर्भातून मिळू शकते.

async function applySepiaFilter(videoFrame) {
  // This example assumes the input frame is 'RGBA' or 'BGRA'.
  if (videoFrame.format !== 'RGBA' && videoFrame.format !== 'BGRA') {
    console.error('Sepia filter example requires an RGBA frame.');
    videoFrame.close();
    return null;
  }

  // Allocate a buffer to hold the pixel data.
  const frameDataSize = videoFrame.allocationSize();
  const frameData = new Uint8Array(frameDataSize);
  await videoFrame.copyTo(frameData);

  const layout = videoFrame.layout[0]; // RGBA is a single plane

  // Now, manipulate the data in the buffer.
  for (let y = 0; y < videoFrame.codedHeight; y++) {
    for (let x = 0; x < videoFrame.codedWidth; x++) {
      const pixelIndex = y * layout.stride + x * 4; // 4 bytes per pixel (R,G,B,A)

      const r = frameData[pixelIndex];
      const g = frameData[pixelIndex + 1];
      const b = frameData[pixelIndex + 2];

      const tr = 0.393 * r + 0.769 * g + 0.189 * b;
      const tg = 0.349 * r + 0.686 * g + 0.168 * b;
      const tb = 0.272 * r + 0.534 * g + 0.131 * b;

      frameData[pixelIndex] = Math.min(255, tr);
      frameData[pixelIndex + 1] = Math.min(255, tg);
      frameData[pixelIndex + 2] = Math.min(255, tb);
      // Alpha (frameData[pixelIndex + 3]) remains unchanged.
    }
  }

  // Create a *new* VideoFrame with the modified data.
  const newFrame = new VideoFrame(frameData, {
    format: videoFrame.format,
    codedWidth: videoFrame.codedWidth,
    codedHeight: videoFrame.codedHeight,
    timestamp: videoFrame.timestamp,
    duration: videoFrame.duration
  });

  // Don't forget to close the original frame!
  videoFrame.close();

  return newFrame;
}

हे एक संपूर्ण रीड-मॉडिफाय-राइट सायकल दर्शवते: डेटा कॉपी करणे, स्ट्राइड वापरून त्यावर लूप करणे, प्रत्येक पिक्सेलवर गणितीय परिवर्तन लागू करणे, आणि परिणामी डेटासह एक नवीन VideoFrame तयार करणे. ही नवीन फ्रेम नंतर कॅनव्हासवर रेंडर केली जाऊ शकते, VideoEncoder ला पाठवली जाऊ शकते, किंवा दुसऱ्या प्रोसेसिंग स्टेपला दिली जाऊ शकते.

परफॉर्मन्स महत्त्वाचा आहे: जावास्क्रिप्ट विरुद्ध वेबअसेंब्ली (WASM)

प्रत्येक फ्रेमसाठी लाखो पिक्सेलवर (1080p फ्रेममध्ये 2 दशलक्षाहून अधिक पिक्सेल किंवा RGBA मध्ये 8 दशलक्ष डेटा पॉइंट्स असतात) जावास्क्रिप्टमध्ये इटरेट करणे मंद असू शकते. जरी आधुनिक JS इंजिन्स अविश्वसनीयपणे वेगवान असले तरी, हाय-रिझोल्यूशन व्हिडिओच्या (HD, 4K) रिअल-टाइम प्रोसेसिंगसाठी, हा दृष्टिकोन मुख्य थ्रेडवर सहजपणे भार टाकू शकतो, ज्यामुळे वापरकर्त्याचा अनुभव खराब होऊ शकतो.

येथेच वेबअसेंब्ली (WASM) एक आवश्यक साधन बनते. WASM तुम्हाला C++, Rust, किंवा Go सारख्या भाषांमध्ये लिहिलेला कोड ब्राउझरमध्ये जवळजवळ नेटिव्ह वेगाने चालवण्याची परवानगी देतो. व्हिडिओ प्रोसेसिंगसाठी वर्कफ्लो असा होतो:

1. जावास्क्रिप्टमध्ये: रॉ पिक्सेल डेटा ArrayBuffer मध्ये मिळवण्यासाठी videoFrame.copyTo() वापरा.
2. WASM ला पास करा: या बफरचा संदर्भ तुमच्या कंपाईल केलेल्या WASM मॉड्यूलमध्ये पास करा. ही एक अतिशय वेगवान क्रिया आहे कारण त्यात डेटा कॉपी करणे समाविष्ट नाही.
3. WASM मध्ये (C++/Rust): तुमचे अत्यंत ऑप्टिमाइझ केलेले इमेज प्रोसेसिंग अल्गोरिदम थेट मेमरी बफरवर कार्यान्वित करा. हे जावास्क्रिप्ट लूपपेक्षा कित्येक पटीने वेगवान आहे.
4. जावास्क्रिप्टमध्ये परत या: एकदा WASM चे काम पूर्ण झाल्यावर, नियंत्रण जावास्क्रिप्टकडे परत येते. त्यानंतर तुम्ही नवीन VideoFrame तयार करण्यासाठी सुधारित बफर वापरू शकता.

कोणत्याही गंभीर, रिअल-टाइम व्हिडिओ मॅनिप्युलेशन ऍप्लिकेशनसाठी—जसे की व्हर्च्युअल बॅकग्राउंड, ऑब्जेक्ट डिटेक्शन, किंवा जटिल फिल्टर्स—वेबअसेंब्लीचा वापर करणे हा केवळ एक पर्याय नाही; ती एक गरज आहे.

वेगवेगळे पिक्सेल फॉरमॅट्स हाताळणे (उदा., I420, NV12)

जरी RGBA सोपे असले तरी, तुम्हाला बऱ्याचदा VideoDecoder कडून प्लेनर YUV फॉरमॅटमध्ये फ्रेम्स मिळतील. चला I420 सारख्या पूर्णपणे प्लेनर फॉरमॅटला कसे हाताळायचे ते पाहूया.

I420 फॉरमॅटमधील VideoFrame च्या layout ॲरेमध्ये तीन लेआउट डिस्क्रिप्टर्स असतील:

• layout[0]: Y प्लेन (ल्युमा). डायमेन्शन्स codedWidth x codedHeight.
• layout[1]: U प्लेन (क्रोमा). डायमेन्शन्स codedWidth/2 x codedHeight/2.
• layout[2]: V प्लेन (क्रोमा). डायमेन्शन्स codedWidth/2 x codedHeight/2.

येथे तुम्ही तिन्ही प्लेन्स एकाच बफरमध्ये कसे कॉपी कराल ते दिले आहे:

async function extractI420Planes(videoFrame) {
  const totalSize = videoFrame.allocationSize({ format: 'I420' });
  const allPlanesData = new Uint8Array(totalSize);

  const layouts = await videoFrame.copyTo(allPlanesData);

  // layouts is an array of 3 PlaneLayout objects
  console.log('Y Plane Layout:', layouts[0]); // { offset: 0, stride: ... }
  console.log('U Plane Layout:', layouts[1]); // { offset: ..., stride: ... }
  console.log('V Plane Layout:', layouts[2]); // { offset: ..., stride: ... }

  // You can now access each plane within the `allPlanesData` buffer
  // using its specific offset and stride.

  const yPlaneView = new Uint8Array(
    allPlanesData.buffer,
    layouts[0].offset,
    layouts[0].stride * videoFrame.codedHeight
  );

  // Note the chroma dimensions are halved!
  const uPlaneView = new Uint8Array(
    allPlanesData.buffer,
    layouts[1].offset,
    layouts[1].stride * (videoFrame.codedHeight / 2)
  );

  const vPlaneView = new Uint8Array(
    allPlanesData.buffer,
    layouts[2].offset,
    layouts[2].stride * (videoFrame.codedHeight / 2)
  );

  console.log('Accessed Y plane size:', yPlaneView.byteLength);
  console.log('Accessed U plane size:', uPlaneView.byteLength);

  videoFrame.close();
}

आणखी एक सामान्य फॉरमॅट NV12 आहे, जो सेमी-प्लेनर आहे. यात दोन प्लेन्स आहेत: एक Y साठी, आणि दुसरा प्लेन जिथे U आणि V व्हॅल्यूज इंटरलीव्ह केलेले असतात (उदा., [U1, V1, U2, V2, ...]). वेबकोडेक्स API हे पारदर्शकपणे हाताळते; NV12 फॉरमॅटमधील VideoFrame च्या layout ॲरेमध्ये फक्त दोन लेआउट्स असतील.

आव्हाने आणि सर्वोत्तम पद्धती

या निम्न स्तरावर काम करणे शक्तिशाली आहे, परंतु ते जबाबदाऱ्यांसह येते.

मेमरी व्यवस्थापन सर्वोपरि आहे

एक VideoFrame लक्षणीय प्रमाणात मेमरी राखून ठेवतो, जी अनेकदा जावास्क्रिप्ट गार्बेज कलेक्टरच्या हीपच्या बाहेर व्यवस्थापित केली जाते. जर तुम्ही ही मेमरी स्पष्टपणे रिलीझ केली नाही, तर तुम्ही मेमरी लीक कराल ज्यामुळे ब्राउझर टॅब क्रॅश होऊ शकतो.

नेहमी, फ्रेमसोबत तुमचे काम झाल्यावर videoFrame.close() कॉल करा.

असिंक्रोनस स्वरूप

सर्व डेटा ऍक्सेस असिंक्रोनस आहे. रेस कंडिशन्स टाळण्यासाठी आणि एक सुरळीत प्रोसेसिंग पाइपलाइन सुनिश्चित करण्यासाठी तुमच्या ऍप्लिकेशनच्या आर्किटेक्चरने प्रॉमिसेस आणि async/await चा प्रवाह योग्यरित्या हाताळला पाहिजे.

ब्राउझर सुसंगतता

वेबकोडेक्स एक आधुनिक API आहे. सर्व प्रमुख ब्राउझरमध्ये समर्थित असले तरी, नेहमी त्याची उपलब्धता तपासा आणि कोणत्याही विक्रेता-विशिष्ट अंमलबजावणी तपशील किंवा मर्यादांबद्दल जागरूक रहा. API वापरण्याचा प्रयत्न करण्यापूर्वी फीचर डिटेक्शन वापरा.

निष्कर्ष: वेब व्हिडिओसाठी एक नवीन सीमा

वेबकोडेक्स API द्वारे VideoFrame च्या रॉ प्लेन डेटामध्ये थेट प्रवेश करण्याची आणि फेरफार करण्याची क्षमता वेब-आधारित मीडिया ऍप्लिकेशन्ससाठी एक आदर्श बदल आहे. ते <video> एलिमेंटचा ब्लॅक बॉक्स काढून टाकते आणि डेव्हलपर्सना पूर्वी फक्त नेटिव्ह ऍप्लिकेशन्ससाठी राखीव असलेले सूक्ष्म नियंत्रण देते.

व्हिडिओ मेमरी लेआउटच्या मूलभूत गोष्टी—प्लेन्स, स्ट्राइड आणि कलर फॉरमॅट्स—समजून घेऊन आणि परफॉर्मन्स-क्रिटिकल ऑपरेशन्ससाठी वेबअसेंब्लीच्या सामर्थ्याचा फायदा घेऊन, तुम्ही आता थेट ब्राउझरमध्ये अविश्वसनीयपणे अत्याधुनिक व्हिडिओ प्रोसेसिंग टूल्स तयार करू शकता. रिअल-टाइम कलर ग्रेडिंग आणि कस्टम व्हिज्युअल इफेक्ट्सपासून ते क्लायंट-साइड मशीन लर्निंग आणि व्हिडिओ विश्लेषणापर्यंत, शक्यता अफाट आहेत. वेबवर हाय-परफॉर्मन्स, लो-लेव्हल व्हिडिओचे युग खऱ्या अर्थाने सुरू झाले आहे.